<!-- 行业配置 -->
<template>
  <div class="management-tree">
    <div class="btn-right">
      <el-button  type="primary" size="mini" @click="addFn">保存</el-button>
    </div>
    <div class="tree-form">
      <div class="tree-box">
        <el-tree
          :data="data"
          :props="defaultProps"
          show-checkbox
          node-key="primartKey"
          @check-change="handleCheckChange"
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.catalogName }}</span>
            <span>
              <el-button v-if="data.level!=2" type="text" size="mini" @click="() => update(node, data)">编辑</el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="form-box" v-if="showChild">
        <div class="form-box-item">
          <el-form :model="typeForm" ref="childForm" label-width="100px" size="small" label-position="right">
              <el-col :span="24">
                <el-form-item label="行业名称" prop="catalogName" :rules="{required: true, message: '行业名称不能为空', trigger: 'blur'}">
                  <el-input  v-model="typeForm.catalogName" disabled> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="行业说明" prop="description" :rules="{required: true, message: '行业说明不能为空', trigger: 'blur'}">
                  <el-input  v-model="typeForm.description" disabled> </el-input>
                </el-form-item>
              </el-col>
               <el-col :span="24">
                <el-form-item label="显示名称" prop="catalogCode" :rules="{required: true, message: '显示名称不能为空', trigger: 'blur'}">
                  <el-input  v-model="typeForm.catalogCode" > </el-input>
                </el-form-item>
              </el-col>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancel">取 消</el-button>
            <el-button size="mini" type="primary" @click="save('childForm')">保存</el-button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {categoryDetail,categoryTree,categoryUpdate,categoryCreate} from '../../../api/index'
  export default {
    data() {
      return {
        defaultProps:{
          children: 'child',
          label: 'catalogName'
        },
        data:[],
        showChild:false,
        typeForm:{
          catalogName:'',
          catalogCode:'',
          description:'',
          parentId:'',
          primaryKey:''
        },
      };
    },

    created() {
      this.getTree()
    },

    methods: {
      async getTree(){
        let res = await categoryTree({
          bizId:'commercial_rent_main_data',
          bizType:'commercial_rent_main_data',
          catalogTypeList:['industry','industry_child'],
          status:1
        })
        this.data =res.rows&&res.rows.length>0? res.rows[0].child:[]
      },
      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      async addFn () {
   
      },
      save(formName){
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let params = Object.assign({
              bizId:'commercial_rent_main_data',
              bizType:'commercial_rent_main_data',
              catalogType:'industry_child',
             },this.typeForm)
            let res =await categoryUpdate(params)
            this.getTree()
            this.$message.success('添加成功！')
            this.cancel()
          }
        });
      },
      async update(node, data){
        this.showChild = true
        let res = await categoryDetail({
          primaryKey:data.primaryKey
        })
        this.typeForm = Object.assign(this.typeForm,res)
      },
      cancel(){
        this.showChild = false
        Object.keys(this.typeForm).forEach(key => this.typeForm[key]=null);
      }
    },
  };
</script>
<style lang="scss" scoped>
.btn-right{
    position: absolute;
    top:-55px;
    right: 20px;
  }
  .el-tree {
    position: relative;
    cursor: default;
    background: #FFF;
    color: #606266;
    width: 100%!important;
  }
  .management-tree{
    padding:20px;
    .tree-form{
      display: flex;
      justify-content: flex-start;
      .tree-box{
        width:40%;
      }
      .form-box{
        width: 60%;
        display: flex;
        justify-content: center;
        .form-box-item{
          width: 70%;
          display: flex;
          justify-content: flex-start;
          flex-direction: column;
          .dialog-footer{
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
</style>